<template>
<div class="tem1_main" v-if="data">
  <!-- 头部 -->
   <div class="header" :class="{'have-header-imgurl':data.base.header_img}">
      <div class="name-box clearfix">
        <span>{{data.base.user_name}}</span><span>{{data.base.sex==1?'男':'女'}}</span>
      </div>
      <div class="base-box">
        <ul v-for="(baseItem,index) in baseList" class="clearfix"  :key="baseItem+index">
          <li v-for="(item,twoIndex) in baseItem" :key="item+twoIndex">
            <div class="base-box-main">
              <div class="name">{{item.name}}</div>
              <div class="value">{{item.value}}</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="header-img" v-if="data.base.header_img" :style="{backgroundImage:`url(${data.base.header_img})`}"></div>
    </div>
    <!-- 教育背景 -->
    <section class="main-list-box" v-if="data.edu && data.edu.length">
       <div class="list-title">{{'教育背景'}}</div>
       <div class="list-box-container">
         <ul class="edu-box">
           <li class="list-box-item" v-for="(item,index) in data.edu" :key="item+index">
              <div class="list-item-basics-box" :class="{'have-img':item.school_logo_url}">
                <div class="basics-img-box" v-if="item.school_logo_url" :style="{backgroundImage:`url(${item.school_logo_url})`}"></div>
                <div class="basics-name-box">
                  {{item.school_name}}
                  <div class="basics-time-box">{{item.start_time}} {{item.end_time}}</div>
                </div>
                <div class="edu-info-box" :class="{'have-gpa':item.gpa!=''}">
                  <div class="edu-info-box-item" v-if="item.college_name">{{item.college_name?`${item.college_name} | `:''}}{{degree[`level_${item.degree}`]}}</div>
                  <div class="edu-info-box-item" v-if="item.major_name">{{item.major_name}}</div>
                  <div class="list-item-description-box" v-if="item.description">
                    <div v-html="rawhtml(item.description)"></div>
                  </div>
                </div>
              </div>
           </li>
         </ul>
       </div>
    </section>
    <!-- 工作经历 -->
    <section class="main-list-box" v-if="data.work && data.work.length">
       <div class="list-title">{{'工作经历'}}</div>
       <div class="list-box-container">
         <ul class="edu-box">
           <li class="list-box-item" v-for="(item,index) in data.work" :key="item+index">
              <div class="list-item-basics-box" :class="{'have-img':item.company_logo_url}">
                <div class="basics-img-box" v-if="item.company_logo_url" :style="{backgroundImage:`url(${item.company_logo_url})`}"></div>
                <div class="basics-name-box">
                  <div class="clearfix">
                    <div class="work-name">
                      {{item.company_name || item.title}}
                    </div>
                    <div class="work-label" v-if="item.is_show_label==1">
                      {{item.label}}
                    </div>
                  </div>
                  <div class="basics-time-box">{{item.start_time}} {{item.end_time}}</div>
                </div>
                <div class="work-position" v-if="item.position_name">
                  {{item.position_name}}
                </div>
              </div>  
              <div class="list-item-description-box" v-if="item.description">
                  <div v-html="rawhtml(item.description)"></div>
              </div>     
           </li>
         </ul>
       </div>
    </section>
     <!-- 项目经历 -->
    <section class="main-list-box" v-if="data.project && data.project.length">
      <div class="list-title">{{'项目经历'}}</div>
      <div class="list-box-container">
        <ul>
          <li class="list-box-item" v-for="(item,index) in data.project" :key="item+index">
            <div class="basics-name-box">
              {{item.title}}
              <div class="basics-time-box">{{item.start_time}} {{item.end_time}}</div>
            </div>
            <div class="list-item-description-box" v-if="item.description">
              <div v-html="rawhtml(item.description)"></div>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- 在校经历 -->
    <section class="main-list-box" v-if="data.eduExperience && data.eduExperience.length">
      <div class="list-title">{{'在校经历'}}</div>
      <div class="list-box-container">
        <ul>
          <li class="list-box-item" v-for="(item,index) in data.eduExperience" :key="item+index">
            
            <div class="basics-name-box">
              {{item.title}} · {{item.position}} - <div class="basics-label" >{{eduExperience[`type_${item.type_id}`]}}</div>
              <div class="basics-time-box">{{item.start_time}} {{item.end_time}}</div>
            </div>
            <div class="list-item-description-box" v-if="item.description">
              <div v-html="rawhtml(item.description)"></div>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- 证书 -->
    <section class="main-list-box" v-if="(data.certificate && data.certificate.length)">
      <div class="list-title">{{'资格证书'}}</div>
      <div class="list-box-container" v-if="data.certificate && data.certificate.length">
        <ul v-for="(item,index) in chunk(data.certificate,2)" :key="item+index" class="clearfix certificate-box" :class="{isOnly:data.certificate.length==1}">
          <li v-for="(childItem,index) in item" :key="childItem+index">
            <div class="list-item-basics-box">
               <div class="basics-name-box certificate">
                  {{childItem.name || childItem.title}}
                  <div class="basics-time-box" v-if="childItem.start_time || childItem.end_time">{{childItem.start_time}} {{childItem.end_time}}</div>
                </div>
                <div class="list-item-description-box" v-if="childItem.description">
                  <div v-html="rawhtml(childItem.description)"></div>
                </div>
            </div>
          </li>
        </ul>
      </div>
     
    </section>
    <section class="main-list-box" v-if="(data.skill && data.skill.length)">
      <div class="list-title">{{'专业技能'}}</div>
      <div class="list-box-container">
        <ul v-for="(item,index) in chunk(data.skill,2)" class="skill-box clearfix" :key="item+index" :class="{isOnly:data.skill.length==1}">
          <li v-for="(childItem,index) in item" :key="childItem+index">
            <div class="skill-item-box">
              {{childItem.name}}
              <div class="skill-label">{{skill[`level_${childItem.leave}`]}}</div>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- 兴趣爱好 -->
    <section class="main-list-box" v-if="data.hobby && data.hobby.length">
      <div class="list-title">{{'兴趣爱好'}}</div>
      <div class="list-box-container">
        <div class="hobby-box">
          <span >{{data.hobby.join(' / ')}}</span>  
        </div>
      </div>
    </section>
    <!-- 自我评价 -->
     <section class="main-list-box" v-if="data.baseIntro">
      <div class="list-title">{{'自我介绍'}}</div>
       <div class="list-box-container">
        <div class="list-item-description-box baseIntro" >
          <div v-html="rawhtml(data.baseIntro)"></div>
        </div>
      </div>
    </section>
</div>
</template>
<script>
import mixin from "../../mixins";
export default {
  name: "template1",
  mixins: [mixin],
  data(){
    return {
      degree:{
        level_1:"高中",
        level_2:"中专",
        level_3:"大专",
        level_4:"本科",
        level_5:"硕士"
      },
      eduExperience:{
        type_1:"社团经历",
        type_2:"学生职务",
        type_3:"奖学金",
        type_4:"竞赛经历",
        type_5:"获奖经历"
      },
      skill:{
        level_1:"初学",
        level_2:"一般",
        level_3:"精通",
        level_4:"熟练",
        level_5:"大师"
      }
    }
  },
  computed:{
    baseList(){
      let base = this.data.base;
      let label={
        "mobile": "手机",
        "email": "邮箱",
        "qq": "QQ",
        "wechat": "微信",
        "birth_time": "生日",
        "nationality": "民族",
        "origin_name": "籍贯",
        "political_status": "政治面貌",
        "height": "身高",
        "weight": "体重",
        "marital_status": "婚姻状况",
        "location_name": "居住地"
      }
      let info = [
        { name: label.mobile, value: base.mobile },
        { name: label.email, value: base.email },
        { name: label.wechat, value: base.wechat },
        { name: label.qq, value: base.qq },
        { name: label.birth_time, value: base.birth_time },
        { name: label.nationality, value: base.nationality },
        { name: label.location_name, value: base.location_name },
        { name: label.political_status, value: base.political_status },
        { name: label.marital_status, value: base.marital_status },
        { name: label.height, value: base.height },
        { name: label.weight, value: base.weight },
        { name: label.origin_name, value: base.origin_name }
      ];
      return this.chunk(info.filter(item => item.value), 3);
    }
  }
};
</script>


<style lang="scss">
@import "./index.scss";
</style>


